<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      default-expand-all
    >
      <el-table-column prop="name" label="用户组" />
      <el-table-column label="组架构" >
        <template #default="scope">
          {{ scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" />
      <el-table-column label="所在空间" >
        <template #default="scope">
          {{ scope.row.permissions.length }}
          <!-- <div @click="console.log(scope)">点击</div> -->
        </template>
      </el-table-column>
      <el-table-column prop="name" label="权限状态" v-if="false"/>
      <el-table-column prop="address" label="操作" fixed="right" width="170">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="addRow(scope.row)">新增下级</el-button>
          <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center items-center">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import http from '@/api/index'

const tableData = ref<any[]>()

// 获取用户组
const getUserGroup = async () => {
  const res = await http.api.getUserGroup()
  if (res.result) {
    tableData.value = res.result.data
  }
}

// 新增下级
const addRow = async (item: any) => {
  console.log(item, 7777)
  // const res = await http.api.addUserGroup({ parent_id: item.id})
  // if (res.result) {

  // }
}

// 编辑行
const editRow = async (item: any) => {
  console.log(item, 7777)
}

// 删除行
const deleteRow = async (item: any) => {
  console.log(item, 7777)
  // const res = await http.api.deleteUserGroup({ ids: [item.id]})
  // if (res.result) {

  // }
}

onMounted(() => {
  getUserGroup()
})

</script>

<style lang="scss" scoped>

</style>
